<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="test"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
    class MyComponent extends React.Component{
        state = {isHot:false,wind:'微风'}
        render(){
            const {isHot,wind} = this.state
            return <h2 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'},{wind}</h2>
        }
        changeWeather=()=>{
            //changeWeather放在哪里?-- Weather的原型对象上，供实例使用
            //由于changeweather是作为onclick的回调，所以不是通过实例调用的，是直接调用
            //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
            // console.log(this);
            const isHot = this.state.isHot
            this.setState({isHot:!isHot})
        }
    }
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))

    
  </script>
</body>

</html>